<template>
    <div class="history-container">
      <el-table :data="historyData" style="width: 100%">
        <el-table-column label="检测时间" width="180">
          <template #default="{ row }">
            {{ row.date }}
          </template>
        </el-table-column>
        <el-table-column label="图片数量" width="120">
          <template #default="{ row }">
            {{ row.filename }}
          </template>
        </el-table-column>
        <el-table-column label="检测结果">
          <template #default="{ row }">
            红细胞：{{ row.RBC }}，白细胞：{{ row.WBC }}，血小板：{{ row.Platelets }}，可信度：{{ row.confidence }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import instance from '../axios/index.js';
  
  export default {
    name: 'HistoryLogs',
    data() {
      return {
        historyData: []
      };
    },
    methods: {
      fetchLogs() {
        instance.get('/api/logs/getLogs').then((response) => {
          if (response.data.success) {
            this.historyData = response.data.data.map(item => ({
              date: item.created_at,
              filename: item.filename,
              RBC: item.rbc,
              WBC: item.wbc,
              Platelets: item.platelets,
              confidence: item.confidence
            }));
            console.log('历史记录:', this.historyData);
          } else {
            this.$message.error(response.data.message || '获取历史记录失败');
          }
        }).catch((error) => {
          console.error('获取历史记录出错:', error);
          this.$message.error('获取历史记录出错');
        });
      }
    },
    mounted() {
      this.fetchLogs();
    }
  };
  </script>
  
  <style scoped lang="less">
  .history-container {
    height: calc(100vh - 160px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  </style>